<template>
  <div class="living">
    <div class="titleImg">
      <img class="auto-img" :src="navTopImg[0].img" alt="" />
      <div class="tit-img">
        <img
          class="auto-img"
          src="	https://p3.ssl.qhimg.com/t010583502f92c2e61f.png"
          alt=""
        />
      </div>
    </div>

    <!-- 导航 -->
    <div class="nav-top-dao">
      <van-tabs v-model="active" sticky @change="c">
        <van-tab :title="v.title" v-for="(v, i) in navTopData" :key="i">
          <div>
            <div>
              <img class="auto-img" :src="lifeTube.item[0][type].img" alt="" />
            </div>
            <div>
              <!-- 商品 -->
              <div class="item-box">
                <div
                  v-for="(item, index) in lifeTube.item[0][type].aa"
                  :key="index"
                  @click="productDetails(item.itemID)"
                >
                  <div class="item">
                    <div class="box-img">
                      <img class="auto-img" :src="item.img" alt="" />
                    </div>
                    <div class="box-content">
                      <div class="box-title ovf-text">{{ item.title }}</div>
                      <div class="box-istitle ovf-text">{{ item.isTitle }}</div>
                      <div class="box-price">
                        <div class="price-h">￥{{ item.currentprice }}</div>
                        <div class="price-hui">
                          ￥<del>{{ item.pastTimesprice }}</del>
                        </div>
                      </div>
                      <div class="box-goumai">{{ item.name }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import lifeTube from "../../public/json/lifeTube.json";
// import { getHeadData } from "../api/introduce"
export default {
  data() {
    return {
      active: 0,
      lifeTube,
      // 头部数据
      navTopImg: [],
      // 头部导航数据
      navTopData: [],
      //   头部图片
      navTopDataImg: [],

      type: "liftTube",
    };
  },
  created() {
    console.log("lifeTude=>", lifeTube);
    this.getLivingData();
  },
  methods: {
    getLivingData() {
      this.navTopImg = lifeTube.item[0].imgg;

      //   头部导航数据
      this.navTopData = lifeTube.item[0].itemTitle;

      // 头部图片
      this.navTopDataImg = lifeTube.item[0].itemimg;
      console.log("this.navTopImg=>", this.navTopImg);
    },

    c(index) {
      console.log("index ==> ", index);
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
      })
      setTimeout(() => {
        let type = this.navTopData[index].type;
        this.type = type;
      }, 1000);
    },

    // 跳转到详情页面
    productDetails(itemID) {
      console.log("itemID生活管=>", itemID);
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        loadingType: 'spinner',
      })
      setTimeout(() => {
        this.$router.push({name:"Details",params:{itemID}})
        
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.box-goumai {
  color: white;
  text-align: center;
  height: 30px;
  line-height: 30px;
  background-color: #e4393c;
  border-radius: 15px;
}
.price-hui {
  color: #999;
  margin-top: 3px;
}
.price-h {
  color: #e4393c;
  font-size: 16px;
  margin-left: 5px;
  font-weight: bold;
}
.box-price {
  margin: 10px 0;
}
.box-istitle {
  font-size: 12px;
  color: #999;
}
.box-content {
  padding: 10px;
  box-sizing: border-box;
}
.box-title {
  font-size: 16px;
  margin: 5px 0;
}
.living {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50px;
  background-color: #a91111;
  overflow-y: auto;
  padding: 0 10px;
  width: 100%;
}
.box-price {
  display: flex;
}
.item {
  // width: calc(50% - 10px);
  width: 175.5px;
  background-color: white;
  margin-right: 5px;
  margin-top: 5px;
  &:nth-child(2n) {
    margin-right: 0;
  }
}
.item-box {
  display: flex;
  flex-wrap: wrap;
}
.tit-img {
  position: absolute;
  top: 30px;
}
</style>

